<template>
	<view class="myOrderBox">
		<uv-navbar title="我的订单"  @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF">
            <template v-slot:left></template>
            </uv-navbar>
		<view class="orderTitle">
			<view :class="[titleFlag==0?'active':'titleItem']" @click="unpaidBtn(0)">
				待确认
			</view>
            <view :class="[titleFlag==1?'active':'titleItem']" @click="unpaidBtn(1)">
            	待支付
            </view>
            <view :class="[titleFlag==2?'active':'titleItem']" @click="unpaidBtn(2)">
            	已支付
            </view>
			<view :class="[titleFlag==3?'active':'titleItem']" @click="unpaidBtn(3)">
				已完成
			</view>
		</view>
		<view class="cardBox" v-for="(item,index) in orderList" :key="index" @click="toMain(item)">
			<view class="cardTitle">
				<text>订单编号：{{item.order_sn}}</text>
				<text class="t2">{{item.status==0?'待确认':item.status==1?'未支付':item.status==2?'已支付':'已完成'}}</text>
			</view>
			<view class="addressBox">
				<text>{{item.area_oring}}</text>
				<image src="../../static/images/i1.png" mode=""></image>
				<text>{{item.area_dest}}</text>
			</view>
			<view class="cardInfo">
				<view v-if="item.car_arr.length" class="cardItem" v-for="(i,n) in item.car_arr">
					<view class="itemInfo">
						车型：{{i.chexing}}
					</view>
					<view class="itemInfo">
						车辆估值：{{i.baozhi}}万元
					</view>
				</view>
				<view class="cardItem">
					<view class="itemInfo" v-if="item.time">
						发运日期：{{item.time}}
					</view>
					<view class="itemInfo">
						委托人：{{item.name}}
					</view>
				</view>
				<view class="cardItem">
					<view class="itemInfo" v-if="item.is_door==1">
						上门提车：{{item.is_door_val==1?'上门取车':"送至网点"}}
					</view>
					<view class="itemInfo" v-if="item.is_car==1">
						送车上门：{{item.is_car_val==1?'上门取车':"送至网点"}}
					</view>
				</view>
			</view>
			<view class="serveBox">
				<view class="serveItem" @click.stop="allCarBtn(item)">
					<image src="../../static/images/d1.png" mode=""></image>
					<text>全部车辆</text>
				</view>
				<view class="serveItem" >
					<image src="../../static/images/d2.png" mode=""></image>
					<text>在线客服</text>
				</view>
				<view v-if="item.hetong" class="serveItem" @click.stop="contractBtn(item)">
					<image src="../../static/images/d3.png" mode=""></image>
					<text>电子合同</text>
				</view>
			</view>
			<view class="checkImg" @click.stop="showAllImg(item)">
				<text>验车照片</text>
				<text >更多&gt&gt</text>
			</view>
			<view class="imgBox align-center" v-if="item.image_list.length">
				<view  v-for="(i,n) in  item.image_list" :key="n" >
              
                <image  :src="i" class="mr10 "  mode=""></image>
                </view>
			</view>
			<view class="moneyInfo" v-if="item.status>0">
            <text>需支付：{{item.trans_amount}}元</text>
			<!-- 	<text>
					运费：{{item.total_amount}}元
				</text> -->
                    
				<view class="payBtn" v-if="item.status==1" >
					<image src="../../static/images/d4.png" mode=""></image>
					立即支付
				</view>
                <view class="submitPz"   >查看详情 </view>
			</view>
		</view>
        <view class="" v-if="orderList.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
		<!--电子合同弹窗-->
		<uv-modal ref="dzContract" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>电子合同</text>
						<uv-icon name="close-circle" size="26" @click="contractClose"></uv-icon>
					</view>
					<view class="">
					    <image :src="contractImg" mode=""></image>
					</view>
				</view>
			</view>
		</uv-modal>
		<!--全部车辆弹窗-->
		<uv-modal ref="carModal" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>全部车辆</text>
						<uv-icon name="close-circle" size="26" @click="carClose"></uv-icon>
					</view>
					<view class="addressInfo">
						<text>{{orderItem.area_oring}}</text>
						<image src="../../static/images/i1.png" mode=""></image>
						<text>{{orderItem.area_dest}}</text>
					</view>
					<view class="timeInfo">
						<view class="tiem_info">
							<view class="i1">
								上门提车： {{orderItem.is_door_val==1?'上门取车':"送至网点"}} 
							</view>
							<view class="i1">
								送车上门：{{orderItem.is_car_val==1?'上门取车':"送至网点"}} 
							</view>
						</view>
						<view class="tiem_info">
							<view class="i1" v-if="orderItem.time">
								发运日期：{{formateTime(orderItem.time) }}
							</view>
							<view class="i1" v-if="orderItem.createtime">
								提交时间：{{formateTime(orderItem.createtime) }} 
							</view>
						</view>

					</view>
					<view class="carInfoBox" v-for="(i,n) in allCarData" :key="n">
						<text>车辆{{n+1}}：{{i.chexing}}</text>估值：{{i.baozhi}}万元
					</view>
				</view>
			</view>
		</uv-modal>
		<!--验车照片-->
		<uv-modal ref="checkCar" :showConfirmButton="false">
			<view class="slot-content">
				<view class="contractBox">
					<view class="titleBox">
						<text>验车照片</text>
						<uv-icon name="close-circle" size="26" @click="carImgClose"></uv-icon>
					</view>
				<view class="imgAllBox">
					<view class="imgBox" v-for="(i,n) in imgList" :key="n">
						<image style="width: 600rpx;"  :src="i" mode="widthFix"></image>
					</view>
				</view>
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleFlag: 0,
                orderList:[],
                allCarData:[],
                orderItem:{},
                imgList:[],
                contractImg:""

			};
		},
		onLoad() {

		},
		onShow() {
			if (!uni.getStorageSync('logintoken')) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			this.getOrder()
		},
		methods: {
            formateTime(data){
              return this.$utils.formatDateTime(data)  
            },
			//立即支付
			payBtn(){
				uni.navigateTo({
					url:'/pages/mine/payment'
				})
			},
			//更多照片
			
			//验证车弹窗关闭
			carImgClose(){
				this.$refs.checkCar.close();
			},
			async getOrder() {
				let data = await this.$api.getMyorder({
					status: this.titleFlag
				})
				
                this.orderList = data.data.list
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//待支付按钮
			unpaidBtn(type) {
				this.titleFlag = type
				this.getOrder()
			},

			//合同按钮
			contractBtn(item) {
                console.log(item)
               uni.downloadFile({
               	url: item.hetong,
               	success: function(res) {
                     uni.openDocument({
                         filePath:res.tempFilePath,
                         fileType:'pdf',
                         success:function(res){
                             
                         }
                     })
               		
               	},
               	fail: function() {
               		return that.$util.Tips({
               			title: ''
               		});
               	}
               });
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//全部车辆弹窗
			allCarBtn(data) {
                this.orderItem = data
                this.allCarData =JSON.parse(data.car_arr)
				this.$refs.carModal.open();
			},
			//车辆弹窗关闭
			carClose() {
				this.$refs.carModal.close();
			},
            async  showAllImg(item){
                // const {data}  =   await  this.$api.cartImage({order_id:item.id})
                
                this.imgList = item.image_list
                this.$refs.checkCar.open();
            },
            async getImglist(id){
                const {data}  =   await  this.$api.cartImage({order_id:id})
                
                return data.list
            },
            toMain(item){
                    uni.navigateTo({
                        url:'/pages/orderDetail/index?id='+item.id
                    })
            },
            submitpz(id){
                    uni.navigateTo({
                        url:'/pages/pay/index?id='+id
                    })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox {
		min-height: 100vh;
		position: relative;
		background-color: RGBA(245, 245, 245, 1);

		.orderTitle {
			width: 750rpx;
			height: 69rpx;
			background-color: #FFFFFF;
			display: flex;
			font-size: 26rpx;
			color: rgba(17, 17, 17, 1);

			.titleItem {
				height: 69rpx;
				line-height: 69rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				font-weight: 600;
			}

			.active {
				height: 69rpx;
				line-height: 69rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				color: #277CC0;
				position: relative;
				font-weight: 600;
			}

			.active::after {
				position: absolute;
				content: "";
				width: 74rpx;
				height: 4rpx;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(39, 124, 192, 1);
			}
		}

		.cardBox {
			width: 710rpx;
			// height: 715rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 25rpx auto;
			overflow: hidden;
            padding-bottom:20rpx;
			.cardTitle {
				height: 54rpx;
				width: 100%;
				background-color: RGBA(78, 77, 74, 1);
				color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 24rpx;
				font-size: 26rpx;

				.t2 {
					color: #D4ECFF;
					font-size: 24rpx;
				}
			}

			.addressBox {
				display: flex;
				width: 662rpx;
				padding: 0rpx 75rpx;
				margin: 0 auto;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				color: #2E2E2E;
				font-weight: 600;
				margin-top: 41rpx;

				image {
					width: 166rpx;
					height: 17rpx;
				}
			}

			.cardInfo {
				width: 662rpx;
				// height: 168rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin: 0 auto;
				margin-top: 24rpx;
				padding-top: 10rpx;
				padding-left: 31rpx;

				.cardItem {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.itemInfo {
						flex-basis: 0rpx;
						flex-grow: 1;
						font-size: 25rpx;
						color: #222222;
						line-height: 49rpx;
					}
				}
			}
		}

		.serveBox {
			width: 662rpx;
			height: 54rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 13rpx;

			.serveItem {
				width: 211rpx;
				height: 54rpx;
				background: #E6E7FD;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				padding-left: 37rpx;
				font-size: 22rpx;
				color: #277CC0;

				image {
					width: 25rpx;
					height: 25rpx;
					margin-right: 13rpx;
				}
			}
		}

		.checkImg {
			width: 662rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 22rpx;
			color: #111111;
			margin-top: 25rpx;
		}

		.imgBox {
			width: 662rpx;
			margin: 0 auto;
flex-wrap: wrap;
			image {
				width: 152rpx;
				height: 151rpx;
				margin-right: 15rpx;
				margin-top: 23rpx;
                border-radius: 6rpx;
		
			}
		}

		.moneyInfo {
			width: 662rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 23rpx;

			text {
				font-size: 30rpx;
				color: rgba(215, 32, 49, 1);
				font-weight: 600;
			}

			.payBtn {
				width: 208rpx;
				height: 54rpx;
				background: rgba(39, 124, 192, 1);
				border-radius: 6rpx;
				color: #ffffff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 11rpx;
				}
			}
		}

		.contractBox {
			width: 699rpx;
			// height: 853rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0rpx 38rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.infoItem {
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					display: inline-block;
					width: 260rpx;
				}
			}

			.addressInfo {
				width: 603rpx;
				margin: 0 auto;
				margin-top: 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #2E2E2E;
					font-weight: 600;
				}

				image {
					width: 166rpx;
					height: 17rpx;
					margin: 0rpx 60rpx;
				}
			}

			.timeInfo {
				width: 600rpx;
				// height: 117rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				padding-left: 22rpx;
				padding-top: 10rpx;

				.tiem_info {
					display: flex;
					align-items: center;
					color: #222222;
					font-size: 22rpx;
					line-height: 49rpx;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfoBox {
				margin-left: 23rpx;
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					padding-right: 20rpx;
				}
			}
			.imgAllBox{
				height: 800rpx;
				width: 600rpx;
				// overflow-x: hidden;
				overflow: auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.imgBox{
				image{
                    
					margin-bottom: 26rpx;
				}
				.imgInfo{
					font-size: 22rpx;
					color: #222222;
					justify-content: space-between;
				}
			}
		}
	}
    .submitPz{
        width: 165rpx;
        height: 54rpx;
        background: #434343;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
    }
</style>